import { reactive, toRefs } from 'vue'
import cloneDeep from 'lodash/cloneDeep'

const hasRef = (formEl) => {
  if (!formEl) {
    console.warn('缺少表单ref，值应为formRef')
    return false
  }
  return true
}

export default ({ formRef, formData, formConfig, formRules }) => {
  const state = reactive({
    form: cloneDeep(formData),
    config: cloneDeep(formConfig),
    rules: cloneDeep(formRules)
  })
  /** Form */
  // formItem 元素赋值
  const setFormDataItem = (key, value) => {
    if (!key) return
    state.form[key] = value
  }
  // 重置form
  const resetFormData = () => {
    state.form = cloneDeep(formData)
  }
  /** Config */
  // 获取configItem
  const getFormConfigItem = (key) => {
    return state.config.find((item) => item.prop === key) || null
  }
  // 设置config
  const setFormConfig = (configs) => {
    state.config = cloneDeep(configs)
  }
  // 设置configItem
  const setFormConfigItem = (key, value) => {
    if (!key) return
    state.config.forEach((item) => {
      if (item.key === key) {
        item = value
      }
    })
  }
  // 设置item属性值 configItemAttr
  const setFormConfigItemAttr = (key, attr, value) => {
    if (!key || !attr) return
    const item = getFormConfigItem(key)
    console.log(item)
    if (!item) return
    item[attr] = value
  }
  // 初始化
  const resetFormConfig = () => {
    state.config = cloneDeep(formConfig)
  }
  /** Rules */
  // 设置rules
  const setFormRules = (rules) => {
    state.rules = cloneDeep(rules)
  }
  // 设置ruleItem
  const setFormRulesItem = (key, index, value) => {
    if (!key) return
    state.rules[key][index] = value
  }
  // 设置
  const setFormRulesItemAttr = (key, index, attr, value) => {
    if (!key || !attr) return
    state.rules[key][index] = value
  }
  const resetFormRules = () => {
    state.rules = cloneDeep(formRules)
  }

  /** ElementPlus 事件 */
  // 提交表单
  const submitForm = async (callback = null) => {
    try {
      if (hasRef(formRef)) {
        const formEl = formRef.value.$refs.formRef
        const valid = await formEl.validate()
        valid && callback && callback(state.form)
        return valid
      }
      return false
    } catch (error) {
      console.error(`error: ${error}`)
    }
  }
  // 重置：清空表单 并清空校验
  const resetForm = () => {
    if (hasRef(formRef)) {
      const formEl = formRef.value.$refs.formRef
      formEl.resetFields()
    }
  }
  // 清空某个字段校验
  const clearValidate = (prop) => {
    if (hasRef(formRef)) {
      const formEl = formRef.value.$refs.formRef
      formEl.clearValidate(prop)
    }
  }
  // 校验某个字段
  const validateField = (prop) => {
    if (hasRef(formRef)) {
      const formEl = formRef.value.$refs.formRef
      formEl.validateField(prop)
    }
  }

  return {
    ...toRefs(state),
    submitForm,
    resetForm,
    clearValidate,
    validateField,
    // form
    setFormDataItem,
    resetFormData,
    // Config
    setFormConfig,
    setFormConfigItem,
    setFormConfigItemAttr,
    resetFormConfig,
    // Rules
    setFormRules,
    setFormRulesItem,
    setFormRulesItemAttr,
    resetFormRules
  }
}
